<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">

    <title>个人中心</title>
    <style>
        :root {
            --primary-color: #7F5BFF;
            --primary-light: rgba(127, 91, 255, 0.1);
            --gradient-primary: linear-gradient(135deg, #7F5BFF 0%, #5B8DFF 100%);
            --text-primary: #1A1A1A;
            --text-secondary: #666666;
            --background-color: #F8F9FC;
            --card-background: #FFFFFF;
            --border-radius: 16px;
            --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
            --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            background-color: var(--background-color);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--text-primary);
            line-height: 1.5;
            margin: 0;
            padding: 24px;
        }

        .profile-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            gap: 24px;
        }

        /* 用户基本信息卡片 */
        .profile-card {
            background: var(--card-background);
            border-radius: var(--border-radius);
            padding: 24px;
            box-shadow: var(--shadow-sm);
        }

        .profile-header {
            display: flex;
            align-items: center;
            gap: 20px;
            margin-bottom: 24px;
            padding-bottom: 24px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            background: var(--gradient-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
        }

        .user-info h2 {
            margin: 0 0 8px;
            font-size: 24px;
        }

        .user-info p {
            margin: 0;
            color: var(--text-secondary);
        }

        .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .info-item {
            padding: 16px;
            background: var(--background-color);
            border-radius: 12px;
            text-align: center;
        }

        .info-item .value {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 4px;
            color: var(--primary-color);
        }

        .info-item .label {
            font-size: 13px;
            color: var(--text-secondary);
        }

        /* 会员信息卡片 */
        .membership-card {
            background: var(--gradient-primary);
            border-radius: var(--border-radius);
            padding: 24px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .membership-pattern {
            position: absolute;
            top: -50%;
            right: -20%;
            width: 600px;
            height: 600px;
            background: repeating-linear-gradient(
                45deg,
                rgba(255,255,255,0.1) 25%,
                transparent 25%,
                transparent 75%,
                rgba(255,255,255,0.1) 75%,
                rgba(255,255,255,0.1)
            );
            background-size: 20px 20px;
            transform: rotate(30deg);
            pointer-events: none;
        }

        .membership-content {
            position: relative;
            z-index: 1;
        }

        .membership-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .membership-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
        }

        .membership-item {
            background: rgba(255, 255, 255, 0.1);
            padding: 16px;
            border-radius: 12px;
        }

        .membership-item .label {
            font-size: 13px;
            opacity: 0.8;
            margin-bottom: 8px;
        }

        .membership-item .value {
            font-size: 18px;
            font-weight: 500;
        }

        /* 操作卡片区域 */
        .operation-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
        }

        .operation-card {
            background: var(--card-background);
            border-radius: var(--border-radius);
            padding: 24px;
            box-shadow: var(--shadow-sm);
        }

        .operation-header {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .operation-header i {
            width: 40px;
            height: 40px;
            background: var(--primary-light);
            color: var(--primary-color);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-group label {
            display: block;
            font-size: 14px;
            color: var(--text-secondary);
            margin-bottom: 8px;
        }

        .form-input {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            font-size: 15px;
            transition: var(--transition);
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px var(--primary-light);
        }

        .submit-btn {
            width: 100%;
            padding: 12px;
            border: none;
            border-radius: 8px;
            background: var(--gradient-primary);
            color: white;
            font-size: 15px;
            font-weight: 500;
            cursor: pointer;
            transition: var(--transition);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .submit-btn:hover {
            opacity: 0.9;
            transform: translateY(-1px);
        }

        .result-message {
            margin-top: 16px;
            padding: 12px;
            border-radius: 8px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .success-message {
            background: #E6FFFA;
            color: #047857;
        }

        .error-message {
            background: #FEF2F2;
            color: #991B1B;
        }

        @media (max-width: 768px) {
            .info-grid,
            .membership-grid,
            .operation-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .info-grid,
            .membership-grid,
            .operation-container {
                grid-template-columns: 1fr;
            }
        }

        /* 升级按钮样式 */
        .upgrade-btn {
            margin-left: auto;
            padding: 8px 16px;
            background: rgba(255, 255, 255, 0.2);
            border: none;
            border-radius: 20px;
            color: white;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .upgrade-btn:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-1px);
        }

        /* 套餐对话框样式 */
        .purchase-dialog {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
            overflow: hidden;
        }

        .dialog-overlay {
            position: fixed;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
        }

        .dialog-content {
            position: relative;
            width: 95%;
            max-width: 1200px;
            max-height: 90vh;
            background: white;
            border-radius: 16px;
            padding: 24px;
            margin: 20px auto;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .dialog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
            padding-right: 8px;
        }

        .dialog-header h3 {
            font-size: 24px;
            color: #2d3436;
            font-weight: 600;
            margin: 0;
        }

        /* 套餐卡片容器 */
        .plans-container {
            display: grid;
            grid-template-columns: repeat(4, minmax(200px, 1fr));
            gap: 16px;
            padding: 4px;
            margin: 0 auto;
            overflow-y: auto;
            max-height: calc(90vh - 100px);
            scrollbar-width: thin;
            scrollbar-color: var(--primary-color) var(--background-color);
            justify-content: center;
            width: 100%;
        }

        /* 自定义滚动条样式 */
        .plans-container::-webkit-scrollbar {
            width: 8px;
        }

        .plans-container::-webkit-scrollbar-track {
            background: var(--background-color);
            border-radius: 4px;
        }

        .plans-container::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 4px;
        }

        .plans-container::-webkit-scrollbar-thumb:hover {
            background: var(--primary-color);
        }

        /* 套餐卡片样式 */
        .plan-card {
            background: white;
            border-radius: 14px;
            padding: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            position: relative;
            border: 1px solid #eee;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 320px;
            height: 100%;
            width: 100%;
        }

        .plan-header {
            text-align: center;
            margin-bottom: 12px;
            position: relative;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;
        }

        .plan-header h4 {
            font-size: 16px;
            color: #2d3436;
            margin-bottom: 8px;
        }

        .price {
            font-size: 24px;
            font-weight: bold;
            color: #7F5BFF;
        }

        .price span {
            font-size: 13px;
            font-weight: normal;
            color: #666;
        }

        .popular-tag {
            position: absolute;
            top: -12px;
            right: -12px;
            background: linear-gradient(135deg, #FF6B6B 0%, #FF4949 100%);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
            z-index: 2;
        }

        .plan-features {
            margin: 12px 0;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .feature {
            display: flex;
            align-items: center;
            gap: 8px;
            color: #4a5568;
            font-size: 13px;
        }

        .feature i {
            color: #7F5BFF;
            font-size: 14px;
        }

        .purchase-btn {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: auto;
        }

        .purchase-btn:not(.premium):not(.enterprise) {
            background: #f8f9fa;
            color: #7F5BFF;
            border: 2px solid #7F5BFF;
        }

        .purchase-btn.premium {
            background: linear-gradient(135deg, #7F5BFF 0%, #5B8DFF 100%);
            color: white;
        }

        .purchase-btn.enterprise {
            background: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
            color: white;
        }

        .purchase-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .plan-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }

        .plan-card.premium {
            border: 2px solid #7F5BFF;
        }

        @media (max-width: 1200px) {
            .dialog-content {
                padding: 24px;
                margin: 16px;
                max-height: 85vh;
            }

            .plans-container {
                grid-template-columns: repeat(3, minmax(200px, 240px));
                gap: 16px;
            }
        }

        @media (max-width: 768px) {
            .dialog-content {
                padding: 20px;
                margin: 12px;
                width: calc(100% - 24px);
                max-height: 80vh;
            }

            .plans-container {
                grid-template-columns: repeat(2, minmax(200px, 240px));
                gap: 12px;
            }

            .plan-card {
                min-height: 360px;
            }
        }

        @media (max-width: 480px) {
            .dialog-content {
                padding: 16px;
                margin: 8px;
                width: calc(100% - 16px);
            }

            .plans-container {
                grid-template-columns: 1fr;
                max-width: 280px;
            }

            .plan-card {
                min-height: 340px;
            }
        }

        /* 支付对话框样式优化 */
        .payment-dialog {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(5px);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
        }

        .payment-content {
            background: white;
            border-radius: 20px;
            padding: 32px;
            width: 90%;
            max-width: 420px;
            position: relative;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            animation: slideUp 0.3s ease;
        }

        @keyframes slideUp {
            from {
                transform: translateY(20px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .payment-dialog-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 24px;
        }

        .payment-dialog-header h3 {
            font-size: 24px;
            color: var(--text-primary);
            margin: 0;
            font-weight: 600;
        }

        .payment-close-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: none;
            background: var(--background-color);
            color: var(--text-secondary);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .payment-close-btn:hover {
            background: var(--primary-light);
            color: var(--primary-color);
            transform: rotate(90deg);
        }

        .payment-amount {
            background: var(--primary-light);
            padding: 20px;
            border-radius: 16px;
            margin-bottom: 24px;
            text-align: center;
        }

        .selected-plan {
            color: var(--text-secondary);
            margin: 0 0 12px;
            font-size: 15px;
        }

        .price {
            color: var(--primary-color);
            font-size: 32px;
            font-weight: 600;
            margin: 0;
        }

        .qrcode-container {
            background: white;
            padding: 20px;
            border-radius: 16px;
            text-align: center;
            border: 2px dashed var(--primary-light);
            margin-bottom: 20px;
        }

        .payment-qrcode {
            width: 200px;
            height: 200px;
            border-radius: 12px;
            margin-bottom: 16px;
        }

        .payment-tip {
            color: var(--text-secondary);
            margin: 0;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .payment-tip i {
            color: #07C160;
        }

        .contact-btn {
            background: linear-gradient(135deg, #07C160 0%, #10B981 100%);
            color: white;
            border: none;
            padding: 14px 24px;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            margin: 24px 0 16px;
            width: 100%;
            transition: all 0.3s ease;
        }

        .contact-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(7, 193, 96, 0.2);
        }

        .contact-tip {
            color: var(--text-secondary);
            margin: 0;
            font-size: 14px;
            text-align: center;
        }

        .payment-methods {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

        .payment-method {
            flex: 1;
            padding: 12px;
            border: 2px solid var(--background-color);
            border-radius: 12px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .payment-method.active {
            border-color: var(--primary-color);
            background: var(--primary-light);
        }

        .payment-method i {
            font-size: 24px;
            margin-bottom: 8px;
            display: block;
        }

        .payment-method.wechat {
            color: #07C160;
        }

        .payment-method.alipay {
            color: #1677FF;
        }

        .payment-security {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--text-secondary);
            font-size: 13px;
            margin-top: 16px;
            justify-content: center;
        }

        .payment-security i {
            color: var(--primary-color);
        }

        /* 添加加载状态样式 */
        .loading {
            text-align: center;
            padding: 40px;
            color: var(--text-secondary);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
        }

        .loading::after {
            content: '';
            display: inline-block;
            width: 24px;
            height: 24px;
            border: 2px solid var(--primary-color);
            border-radius: 50%;
            border-top-color: transparent;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }
    </style>
</head>
<body>
    <div class="profile-container">
        <!-- 基本信息卡片 -->
        <div class="profile-card">
            <div class="profile-header">
                <div class="avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="user-info">
                    <h2 id="username">加载中...</h2>
                    <p id="email">加载中...</p>
                </div>
            </div>
            <div class="info-grid">
                <div class="info-item">
                    <div class="value" id="usernameValue">加载中...</div>
                    <div class="label">用户名</div>
                </div>
                <div class="info-item">
                    <div class="value" id="emailValue">加载中...</div>
                    <div class="label">邮箱</div>
                </div>
                <div class="info-item">
                    <div class="value" id="statusValue">加载中...</div>
                    <div class="label">账号状态</div>
                </div>
                <div class="info-item">
                    <div class="value" id="registerTimeValue">加载中...</div>
                    <div class="label">注册时间</div>
                </div>
            </div>
        </div>

        <!-- 会员信息卡片 -->
        <div class="membership-card">
            <div class="membership-pattern"></div>
            <div class="membership-content">
                <div class="membership-header">
                    <i class="fas fa-crown"></i>
                    <h3>会员信息</h3>
                    <button class="upgrade-btn" onclick="showPurchaseDialog()">
                        <i class="fas fa-arrow-up"></i> 升级套餐
                    </button>
                </div>
                <div class="membership-grid">
                    <div class="membership-item">
                        <div class="label">当前套餐</div>
                        <div class="value" id="currentPlan">加载中...</div>
                    </div>
                    <div class="membership-item">
                        <div class="label">到期时间</div>
                        <div class="value" id="expireTime">加载中...</div>
                    </div>
                    <div class="membership-item">
                        <div class="label">今日使用额度</div>
                        <div class="value" id="dailyUsage">加载中...</div>
                    </div>
                    <div class="membership-item">
                        <div class="label">总计使用额度</div>
                        <div class="value" id="totalUsage">加载中...</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 操作区域 -->
        <div class="operation-container">
            <!-- 卡密查询 -->
            <div class="operation-card">
                <div class="operation-header">
                    <i class="fas fa-search"></i>
                    <h3>卡密查询</h3>
                </div>
                <form id="queryForm">
                    <div class="form-group">
                        <label for="queryKey">卡密</label>
                        <input type="text" id="queryKey" class="form-input" placeholder="请输入要查询的卡密">
                    </div>
                    <button type="submit" class="submit-btn" id="queryBtn">
                        <i class="fas fa-search"></i>
                        查询
                    </button>
                </form>
                <div id="queryResult"></div>
            </div>

            <!-- 卡密激活 -->
            <div class="operation-card">
                <div class="operation-header">
                    <i class="fas fa-key"></i>
                    <h3>卡密激活</h3>
                </div>
                <form id="activateForm">
                    <div class="form-group">
                        <label for="activateKey">激活码</label>
                        <input type="text" id="activateKey" class="form-input" placeholder="请输入您的激活码">
                    </div>
                    <button type="submit" class="submit-btn" id="activateBtn">
                        <i class="fas fa-check-circle"></i>
                        激活
                    </button>
                </form>
                <div id="activateResult"></div>
            </div>
        </div>
    </div>

    <!-- 添加购买套餐对话框 -->
    <div class="purchase-dialog">
        <div class="dialog-overlay"></div>
        <div class="dialog-content">
            <div class="dialog-header">
                <h3>选择套餐</h3>
                <button class="close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="plans-container" id="plansContainer">
                <!-- 套餐卡片将通过JavaScript动态生成 -->
                <div class="loading">加载中...</div>
            </div>
        </div>
    </div>

    <!-- 支付对话框 -->
    <div class="payment-dialog" style="display: none;">
        <div class="payment-content">
            <div class="payment-dialog-header">
                <h3>扫码支付</h3>
                <button class="payment-close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="payment-amount">
                <p class="selected-plan">已选择：<span id="selectedPlan">-</span></p>
                <p class="price">¥<span id="payment-price">0.00</span></p>
            </div>
            <div class="payment-methods">
                <div class="payment-method wechat active" onclick="switchPaymentMethod('wechat')">
                    <i class="fab fa-weixin"></i>
                    <div>微信支付</div>
                </div>
                <div class="payment-method alipay" onclick="switchPaymentMethod('alipay')">
                    <i class="fab fa-alipay"></i>
                    <div>支付宝</div>
                </div>
            </div>
            <div class="qrcode-container">
                <img id="payment-qrcode" src="/assets/images/Wechatzsm.jpg" alt="微信赞赏码" class="payment-qrcode">
                <p class="payment-tip">
                    <i class="fas fa-shield-alt"></i>
                    请使用微信扫码支付
                </p>
            </div>
            <button class="contact-btn" onclick="showCustomerService()">
                <i class="fab fa-weixin"></i> 添加客服
            </button>
            <p class="contact-tip">支付完成后请联系客服获取卡密</p>
            <div class="payment-security">
                <i class="fas fa-lock"></i>
                支付安全由微信/支付宝保障
            </div>
        </div>
    </div>

    <!-- 客服二维码对话框 -->
    <div class="customer-service-dialog" style="display: none;">
        <div class="cs-content">
            <div class="cs-dialog-header">
                <h3>添加客服微信</h3>
                <button class="cs-close-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="qrcode-container">
                <img src="/assets/images/Wechatzsm.jpg" alt="客服二维码" class="cs-qrcode">
                <p class="cs-tip">扫描二维码添加客服微信</p>
                <p class="cs-tip">添加后回复套餐名称获取卡密</p>
            </div>
        </div>
    </div>

    <script>
        async function initializeProfile(forceRefresh = false) {
            try {
                // 尝试从 AppState 获取数据
                let userInfo = forceRefresh ? null : AppState.userInfo;
                let membershipInfo = forceRefresh ? null : AppState.membershipInfo;
                
                // 如果状态中没有数据，则重新请求
                if (!userInfo || !membershipInfo) {
                    try {
                        const data = await API.loadInitialData();
                        userInfo = data.userInfo;
                        membershipInfo = data.membershipInfo;
                    } catch (error) {
                        console.error('加载初始数据失败:', error);
                        // 如果加载失败，尝试单独获取用户信息
                        userInfo = await API.getUserInfo();
                    }
                }
                
                // 更新用户基本信息显示
                updateUserInfo(userInfo);
                
                // 更新会员信息显示，即使 membershipInfo 为空也调用
                updateMembershipInfo(membershipInfo);
                
            } catch (error) {
                console.error('初始化个人资料失败:', error);
                // 发生错误时也要显示默认状态
                updateUserInfo(null);
                updateMembershipInfo(null);
                showMessage('加载用户信息失败', 'error');
            }
        }

        function updateMembershipInfo(membershipInfo) {
            // 如果 membershipInfo 为空或没有 membership 属性，显示默认状态
            if (!membershipInfo || !membershipInfo.membership) {
                document.getElementById('currentPlan').textContent = '未开通会员';
                document.getElementById('expireTime').textContent = '-';
                document.getElementById('dailyUsage').textContent = '0/0';
                document.getElementById('totalUsage').textContent = '0/0';
                return;
            }
            
            const { membership, limits } = membershipInfo;
            
            // 更新会员套餐信息
            document.getElementById('currentPlan').textContent = membership.plan_name || '未开通会员';
            document.getElementById('expireTime').textContent = membership.expires_at ? new Date(membership.expires_at).toLocaleDateString() : '-';
            document.getElementById('dailyUsage').textContent = limits ? `${limits.used_today || 0}/${limits.daily_limit || 0}` : '0/0';
            document.getElementById('totalUsage').textContent = limits ? `${limits.total_used || 0}/${limits.total_limit || 0}` : '0/0';
        }

        function updateUserInfo(userInfo) {
            if (!userInfo) {
                console.error('用户信息不存在');
                return;
            }
            
            const { username, email } = userInfo;
            
            // 更新用户基本信息
            document.getElementById('username').textContent = username || '未设置';
            document.getElementById('email').textContent = email || '未设置';
            document.getElementById('usernameValue').textContent = username || '未设置';
            document.getElementById('emailValue').textContent = email || '未设置';
            document.getElementById('statusValue').textContent = '正常';
            document.getElementById('registerTimeValue').textContent = new Date().toLocaleDateString(); // 如果有注册时间，使用实际值
        }

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            initializeProfile();

            // 检查是否需要显示升级套餐对话框
            if (localStorage.getItem('show_upgrade_dialog') === 'true') {
                // 清除标记
                localStorage.removeItem('show_upgrade_dialog');
                // 显示升级套餐对话框
                showPurchaseDialog();
            }
        });

        // 卡密查询功能
        document.getElementById('queryForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const queryKey = document.getElementById('queryKey').value.trim();
            if (!queryKey) {
                showMessage('请输入要查询的卡密', 'error');
                return;
            }
            
            try {
                const submitBtn = document.getElementById('queryBtn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 查询中...';
                
                const result = await API.checkCDKey(queryKey);
                
                // 显示查询结果
                const resultDiv = document.getElementById('queryResult');
                resultDiv.innerHTML = `
                    <div class="result-message success-message">
                        <i class="fas fa-info-circle"></i>
                        <div>
                            <p><strong>卡密状态：</strong>${result.is_used ? '已使用' : '未使用'}</p>
                            <p><strong>套餐名称：</strong>${result.plan_name}</p>
                            <p><strong>套餐说明：</strong>${result.plan_description}</p>
                            <p><strong>有效期：</strong>${result.plan_duration_days}天</p>
                            <p><strong>每日限额：</strong>${result.daily_limit}</p>
                            <p><strong>总限额：</strong>${result.total_limit}</p>
                        </div>
                    </div>
                `;
                
            } catch (error) {
                console.error('查询卡密失败:', error);
                document.getElementById('queryResult').innerHTML = `
                    <div class="result-message error-message">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>${error.message || '查询失败，请重试'}</span>
                    </div>
                `;
            } finally {
                const submitBtn = document.getElementById('queryBtn');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-search"></i> 查询';
            }
        });

        // 卡密激活功能
        document.getElementById('activateForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const activateKey = document.getElementById('activateKey').value.trim();
            if (!activateKey) {
                showMessage('请输入要激活的卡密', 'error');
                return;
            }
            
            try {
                const submitBtn = document.getElementById('activateBtn');
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 激活中...';
                
                const result = await API.activateCDKey(activateKey);
                
                // 显示激活结果
                const resultDiv = document.getElementById('activateResult');
                resultDiv.innerHTML = `
                    <div class="result-message success-message">
                        <i class="fas fa-check-circle"></i>
                        <div>
                            <p><strong>激活成功！</strong></p>
                            <p><strong>套餐名称：</strong>${result.plan_name}</p>
                            <p><strong>套餐说明：</strong>${result.plan_description}</p>
                            <p><strong>有效期：</strong>${result.plan_duration_days}天</p>
                            <p><strong>每日限额：</strong>${result.daily_limit}</p>
                            <p><strong>总限额：</strong>${result.total_limit}</p>
                        </div>
                    </div>
                `;
                
                // 清空输入框
                document.getElementById('activateKey').value = '';
                
                // 显示成功消息
                showMessage('卡密激活成功！', 'success');
                
                // 强制刷新页面数据
                await initializeProfile(true);
                
            } catch (error) {
                console.error('激活卡密失败:', error);
                document.getElementById('activateResult').innerHTML = `
                    <div class="result-message error-message">
                        <i class="fas fa-exclamation-circle"></i>
                        <span>${error.message || '激活失败，请重试'}</span>
                    </div>
                `;
            } finally {
                const submitBtn = document.getElementById('activateBtn');
                submitBtn.disabled = false;
                submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> 激活';
            }
        });

        // 生成套餐卡片HTML
        function generatePlanCard(plan, isPopular = false) {
            return `
                <div class="plan-card ${isPopular ? 'premium' : ''}">
                    ${isPopular ? '<div class="popular-tag">最受欢迎</div>' : ''}
                    <div class="plan-header">
                        <h4>${plan.name}</h4>
                        <div class="price">¥${plan.price}<span>/${plan.duration_days}天</span></div>
                    </div>
                    <div class="plan-features">
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <span>每日限额：${plan.usage_limits.daily_limit}次</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <span>总计限额：${plan.usage_limits.total_limit}次</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <span>${plan.description}</span>
                        </div>
                        <div class="feature">
                            <i class="fas fa-check-circle"></i>
                            <span>${plan.duration_days}天有效期</span>
                        </div>
                    </div>
                    <button class="purchase-btn ${isPopular ? 'premium' : ''}" 
                            onclick="handlePurchase('${plan.id}', '${plan.price}', '${plan.name}')">
                        立即购买
                    </button>
                </div>
            `;
        }

        // 显示购买对话框
        async function showPurchaseDialog() {
            const dialog = document.querySelector('.purchase-dialog');
            const plansContainer = document.getElementById('plansContainer');
            
            // 每次打开对话框时清空内容并显示加载状态
            plansContainer.innerHTML = '<div class="loading">加载套餐信息...</div>';
            dialog.style.display = 'flex';
            
            try {
                // 每次都重新请求套餐数据
                const plansData = await API.getMembershipPlans();
                
                if (plansData.list && plansData.list.length > 0) {
                    // 生成套餐卡片
                    const plansHTML = plansData.list.map((plan, index) => 
                        generatePlanCard(plan, index === 1)
                    ).join('');
                    
                    // 更新界面
                    plansContainer.innerHTML = plansHTML;
                } else {
                    plansContainer.innerHTML = '<div class="no-plans">暂无可用套餐</div>';
                }
                
                // 绑定关闭事件
                const closeBtn = dialog.querySelector('.close-btn');
                const overlay = dialog.querySelector('.dialog-overlay');
                
                const closeDialog = () => {
                    dialog.style.display = 'none';
                    plansContainer.innerHTML = ''; // 关闭时清空内容
                };
                
                closeBtn.onclick = closeDialog;
                overlay.onclick = closeDialog;
                
            } catch (error) {
                console.error('显示套餐对话框失败:', error);
                plansContainer.innerHTML = `
                    <div class="error-message">
                        <i class="fas fa-exclamation-circle"></i>
                        获取套餐信息失败，请稍后重试
                    </div>
                `;
            }
        }

        // 处理购买请求
        async function handlePurchase(planId, price, planName) {
            try {
                // 隐藏套餐选择对话框
                const purchaseDialog = document.querySelector('.purchase-dialog');
                purchaseDialog.style.display = 'none';

                // 更新支付对话框信息
                const paymentDialog = document.querySelector('.payment-dialog');
                document.getElementById('selectedPlan').textContent = planName;
                document.getElementById('payment-price').textContent = price;
                
                // 存储选中的套餐ID，用于后续支付处理
                paymentDialog.dataset.planId = planId;
                
                // 显示支付对话框
                paymentDialog.style.display = 'block';
                
                // 绑定关闭事件
                const closeBtn = paymentDialog.querySelector('.payment-close-btn');
                closeBtn.onclick = () => paymentDialog.style.display = 'none';
                
            } catch (error) {
                console.error('处理购买请求失败:', error);
                showMessage('处理购买请求失败，请稍后重试', 'error');
            }
        }

        // 显示客服二维码
        function showCustomerService() {
            const csDialog = document.querySelector('.customer-service-dialog');
            csDialog.style.display = 'block';
            
            // 绑定关闭事件
            const closeBtn = csDialog.querySelector('.cs-close-btn');
            closeBtn.onclick = () => csDialog.style.display = 'none';
            
            // 点击外部区域关闭
            document.addEventListener('click', function closeDialog(e) {
                if (!csDialog.contains(e.target) && e.target !== csDialog) {
                    csDialog.style.display = 'none';
                    document.removeEventListener('click', closeDialog);
                }
            });
        }

        // 切换支付方式
        function switchPaymentMethod(method) {
            const wechatMethod = document.querySelector('.payment-method.wechat');
            const alipayMethod = document.querySelector('.payment-method.alipay');
            const qrcodeImage = document.getElementById('payment-qrcode');
            const paymentTip = document.querySelector('.payment-tip');
            
            if (method === 'wechat') {
                wechatMethod.classList.add('active');
                alipayMethod.classList.remove('active');
                qrcodeImage.src = '/assets/images/Wechatzsm.jpg';
                qrcodeImage.alt = '微信支付码';
                paymentTip.innerHTML = '<i class="fas fa-shield-alt"></i> 请使用微信扫码支付';
            } else {
                wechatMethod.classList.remove('active');
                alipayMethod.classList.add('active');
                qrcodeImage.src = '/assets/images/Wechatzsm.jpg'; // 这里替换成支付宝的二维码
                qrcodeImage.alt = '支付宝付款码';
                paymentTip.innerHTML = '<i class="fas fa-shield-alt"></i> 请使用支付宝扫码支付';
            }
        }

        // 显示消息提示
        function showMessage(message, type = 'info') {
            const existingMessage = document.querySelector('.message-box');
            if (existingMessage) {
                existingMessage.remove();
            }

            const messageBox = document.createElement('div');
            messageBox.className = `message-box message-${type}`;
            messageBox.innerHTML = `
                <i class="fas fa-${type === 'success' ? 'check' : 'exclamation'}-circle"></i>
                <span>${message}</span>
            `;

            document.body.appendChild(messageBox);

            setTimeout(() => {
                messageBox.style.opacity = '0';
                setTimeout(() => messageBox.remove(), 300);
            }, 3000);
        }
    </script>
</body>
</html>
